<template>
	<view class="container">
		<!-- <view class="logout">
			<view class="iconout" @click="logOut()">
				<uni-icons type="upload" size="30"></uni-icons>
			</view>退出
		</view> -->
		<view class="logo"><img src="@/static/image/jnxdtzbyq.png" alt=""></view>
		<view class="content">
			<view class="contentItem" v-for="(itemList,indexList) in list" :key="itemList.menuId">
				<uni-section :title="itemList.name" type="line"></uni-section>
				<view class="grid-body">
					<uni-grid :column="3" :showBorder="false">
						<uni-grid-item :name="'name'+indexList+index" v-for="(item,index) in itemList.list"
							:key="item.menuId" @tap="redirectToClick(item.name,item.url)">
							<view class="grid-item-box">
								<!-- <uni-icons type="home" size="30"></uni-icons> -->
								<uni-icons color="#50AD45" custom-prefix="iconfont" :type="item.icon" size="38"></uni-icons>
								<text class="text">{{item.name}}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" :mask-click="false" type="dialog" background-color="#fff" style="width: 100%;">
			<view class="popup-content">
				<p style="margin-bottom: 10px;">申请获取您的手机号:</p>
				<p class="numberfile">1.基于具体业务场景和功能权限获取您的手机号；</p>
				<p class="numberfile">2.我们会基于先进的技术和管理措施保护您的个人信息安全；</p>
				<p class="numberfile" style="margin-bottom: 10px;">3.未经您的同意，我们不会将您的个人信息共享给第三方。</p>
				<button type='primary' open-type='getPhoneNumber' lang="zh_CN"
					@getphonenumber="getPhoneNumber">手机号绑定</button>
					<button type='primary' style="margin-top: 10px;" @click="closeFun()">取消</button>
			</view>
		</uni-popup>
		<uni-fab ref="fab" :pattern="pattern" :horizontal="horizontal" :vertical="vertical" :direction="direction"
			@fabClick="fabClick" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '登录适配',
				list: [],
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#fff',
					iconColor: '#ccc',
					icon: 'scan'
				},
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
			}
		},
		created() {
			this.getUserProfile()
		},
		onLoad(query) {
			console.log(query)
			if (query.q) {
				const q = decodeURIComponent(query.q) // 获取到二维码原始链接内容
				const scancode_time = parseInt(query.scancode_time) // 获取用户扫码时间 UNIX 时间戳
				let id = q.split('=')[1]
				console.log(id)
				this.$store.commit('updateValue', id);
			} else {
				this.$store.commit('updateValue', null);
			}
			// this.$store.commit('updateValue',101);

		},

		methods: {
			fabClick() {
				this.getcode('/pages/index/index')

			},
			//重新扫描二维码
			getcode(e) {
				wx.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						// that.setData({
						//   qrcodeResult: res.result
						// })
						if (res.result.indexOf('id=') != -1) {
							let id = res.result.split('=')[1]
							console.log(id)
							this.$store.commit('updateValue', id);
							console.log(res)
							wx.navigateTo({
								url: e
							})
						} else {
							uni.showModal({
								title: '提示',
								showCancel: false,
								content: '二维码错误,请扫描产品二维码！',
								success: (res) => {
									if (res.confirm) {
										this.getcode('/pages/index/index')
									}
								}
							});
						}

					},
				})
			},
			redirectToClick(name, e) {
				console.log(e)
				// this.$modal.showToast('模块建设中~')
				if (name != '企业介绍' && name != '视频指导' && this.$store.getters.productId == null) {
					this.getcode(e)
				} else {
					wx.navigateTo({
						url: e
					})
				}

			},
			getQueryString(name) {
				var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
				var r = window.location.search.substr(1).match(reg);
				if (r != null) {
					return unescape(r[2]);
				}
				return null;
			},
			getMenu() {
				this.request({
					'url': '/wx/nav',
					'method': 'get',
				}).then(res => {
					console.log(res)
					if (res && res.code == 200) {
						uni.setStorageSync("menuArr", JSON.stringify(res.menuList))
						uni.setStorageSync("permissions", JSON.stringify(res.permissions))
						this.list = JSON.parse(uni.getStorageSync('menuArr'))
					}
				}).catch(err => {

				})
			},
			openInfo() {
				this.$refs.popup.open('bottom')
			},
			getUserProfile() {
				uni.login({
					success: (res) => {
						console.log(res)
						if (res.code) {
							this.getTokenLogin(res.code)
						}
					}
				})
			},
			closeFun(){
				uni.exitMiniProgram({
					success: function() {
						console.log('退出小程序成功');
						// store.dispatch('LogOut')
					},
					fail: function(err) {
						console.log('退出小程序失败', err);
					}
				})
			},
			//接口登录
			getTokenLogin(code) {
				this.$store.dispatch('Login', code).then((res) => {
					console.log(res)
					if (res.mobile) {
						// this.isgetPhone=false
						this.getMenu()
						// 手机号已绑定
						// wx.redirectTo({
						// 	url: '/pages/index/index'
						// })
					} else {
						//获取手机号
						// this.isgetPhone=true
						// console.log(isgetPhone)
						this.openInfo()

					}
				}).catch(() => {})
			},
			//获取手机号
			getPhoneNumber(e) {
				console.log(e)
				if (e.detail.code) {
					let codePhone = e.detail.code
					let encryptedData = e.detail.encryptedData
					let iv = e.detail.iv
					this.request({
						'url': '/wx/getMobile?code=' + e.detail.code,
						'method': 'get',
					}).then(res => {
						console.log(res)
						if (res.msg == 'success') {
							//手机绑定成功
							// wx.redirectTo({
							// 	url: '/pages/index/index'
							// })
							this.$refs.popup.close()
							this.getMenu()
						}
					}).catch(err => {

					})
				} else {
					this.isgetPhone = false
				}
			},
			logOut() {
				// store.dispatch('LogOut').then(res => {})
				uni.exitMiniProgram({
					success: function() {
						console.log('退出小程序成功');
						store.dispatch('LogOut')
					},
					fail: function(err) {
						console.log('退出小程序失败', err);
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		width: 100%;
		height: 100%;
		font-size: 16px;
		/* line-height: 24px; */
		background-color: #fff;
	}

	.container .uni-section {
		/* background-color: #E6F4FF; */
	}
	.container .uni-section text{
		font-size: 18px!important;
		font-weight: 600;
	}
	.logo {
		width: 100%;
		height: 120px;
	}

	.logo img {
		width: 100%;
		height: 120px;
	}

	.contentItem {
		margin-bottom: 10px;
	}

	.text {
		text-align: center;
		font-size: 30rpx;
		margin-top: 10rpx;
		width: 72%;
	}

	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px 0;
	}

	.uni-grid-item {
		height: 80px !important;
	}

	.logout {
		display: flex;
		align-items: center;
		background-color: #E6F4FF;
		padding: 0 20px;
		justify-content: flex-end;
	}

	.logout .iconout {
		transform: rotateZ(90deg);
	}

	/* .uni-popup__wrapper{
		width: 100%;
		
	} */
	.popup-content {
		padding: 40px;
	}
	.numberfile{
		font-size: 14px;
		color: #999;
		margin-left: 20px;
		line-height: 28px;
	}
	/* button{
		width: 100%;
		flex-shrink:0;
	} */
</style>